<script setup>
import { selComps, hasChildren } from "./utils.js";
import { computed, defineProps } from "vue";
const props = defineProps(["meta", "vm"]);
const { meta, vm } = props;
const childs = computed(() => {
  let commands = meta.commands || [];
  let buttons = [];
  let items = [];
  commands.forEach(x => {
    buttons.push(x);
  });

  let len = buttons.length;
  let idx = 0;
  while (idx < len) {
    let tmpSingles = [];
    for (; idx < len; idx++) {
      var btn = buttons[idx];
      if (hasChildren(btn)) {
        items.push(btn);
        idx++;
        break;
      } else {
        tmpSingles.push(btn);
      }
    }
    if (tmpSingles.length > 0) {
      items.push({ "control": "btnGroup", "items": tmpSingles });
    }
  }
  return items;
});
</script>
<template>
  <!-- text-align:right; -->
  <div style="padding:0 1em 0 0;margin-bottom: 4px;">
    <component v-for="item in childs" :is="selComps(item)" :vm="vm" :meta="item" />
  </div>
</template>